import React, {Component} from 'react';
import { Form, Input, Button, Icon, Modal, Checkbox, message } from 'antd';
import { Link, history } from 'react-router-dom';
import './index.less';
import axios from 'axios';
const FormItem = Form.Item;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

class Register extends Component {
    constructor(props) {
      super(props);
      this.state = {
        confirmDirty: false,
        visible: false,
        autoCompleteResult: [],
        checked: true,
        registerMark: '注册用户',
        getCode: '获取验证码',
      }
      this.showModal = this.showModal.bind(this);
    }
    componentWillMount() {
      localStorage.setItem("token", "");
    }
    showModal = () => {
        this.setState({
            visible: true,
        });
    }
    handleOk = () => {
        this.setState({visible: false });
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    handleOkCopy = () => {
        this.setState({
          visibleCopy: false,
          checked: true, 
        });
    }
    handleCancelCopy = () => {
        this.setState({ visibleCopy: false });
    }
    modalCopy = () =>{
        this.setState({ visibleCopy: true });
    }
    onChange = (e) => {
      this.setState({
          checked: e.target.checked,
      });
    }
    handleSubmit = (e) => {
      e.preventDefault();
      const _this = this;
      const Token = localStorage.getItem("token");
      // const regExp = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/;
      // const regExpUserName = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{3,20}$/;
      // const regExpMobile = /^1[0-9]{10}$/;
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
              _this.viodClickAgain();
              setTimeout(()=>{
                  _this.setState({
                      registerMark: '注册用户'
                  })
                },2000)
              // axios({
              //   method: 'get',
              //   url: '/api/customer/rest/checkMsg?mobile='+ values.telPhone +'&code='+ values.attr1,
              //   headers: {
              //     'Content-Type': 'application/json',
              //     Authorization: Token,
              //   }
              // })
              // .then(function(response){
              //   if(response.data.message == '请输入正确的手机号'){
              //     message.warning('请输入正确的手机号');
              //   }else if(response.data.data == 'error') {
              //     message.warning('请输入正确的验证码');
              //   }else if(response.data.data == 'success'){
                  axios({
                    method: 'post',
                    url: "/api/customer/user/register",
                    data: values,
                    headers: {
                        'Content-Type': 'application/json',
                        Authorization:Token,
                      }
                    })
                    .then(function(response){
                        // console.log(response);
                        // console.log(values)
                        if(response.data.rel == false){
                            // console.log(1);
                            // _this.showModal();
                            message.warning(response.data.data);
                            return false;
                        }else if(response.data.data == '注册成功！') {
                            setTimeout(()=>{
                              message.success('注册成功！');
                            },2000);
                            setTimeout(()=>{
                              
                              if (window.location.hash == '#/Register/baasWeb') {
                                window.history.replaceState({}, null, '/')
                                window.location.href = "http://106.37.72.95:9081/";                          
                                return
                              }else{
                                window.history.replaceState({}, null, '/')
                                _this.props.history.push('/');
                              }
          
                            },4000)
                        }
                    })
                    .catch(function(error){
                        console.log(error);
                    });
                //   }
                // }) 
            }else {
                console.log('Received values of form: ', values);
            }
          // this.SubmitPost(values)
      });
    }

    handleConfirmBlur = (e) => {
      const value = e.target.value;
      this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    compareToFirstPassword = (rule, value, callback) => {
      const form = this.props.form;
      if (value && value !== form.getFieldValue('password')) {
        callback('您输入的两个密码不一致');
      } else {
        callback();
      }
    }
    validateToNextPassword = (rule, value, callback) => {
      const form = this.props.form;
      if (value && this.state.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    }

    viodClickAgain=()=>{
      this.setState({
          registerMark: '提交中...'
      })
    }

    getPhone =(e)=>{
      this.setState({
        mobile: e.target.value,
      })
    }
    gotologin=()=>{  
      if (window.location.hash =='#/Register/baasWeb'){
        window.history.replaceState({}, null, '/') 
        window.location.href ="http://106.37.72.95:9081/";
        return
      }
      window.history.replaceState({}, null, '/')     
    }

    handleCode =()=>{
      const _this = this;
      let sec = 60;
      const mobile = this.state.mobile;
      const Token = localStorage.getItem("token");
      const myreg = /^1[0-9]{10}$/;
      if (!myreg.test(mobile)) {
        message.warning('请输入正确的手机号');
      }else if(this.state.getCode !== '获取验证码'){
        return false;
      }else{
        axios({
          method: 'get',
          url: '/api/customer/rest/sendMsg?mobile='+ mobile,
          headers: {
            'Content-Type': 'application/json',
            Authorization:Token,
          }
        })
        .then(function(response){
          if(response.data.code == '201'){
            message.warning('请输入正确的手机号');
          }else if(response.data.code == '202'){
            message.warning('获取手机验证码失败');
          }else if(response.data.code == '200') {
            const timer = setInterval(function(){
              sec--;
              if(sec < 0){
                clearInterval(timer);
                _this.setState({
                  getCode:  '获取验证码',
                })
              }else {
                _this.setState({
                  getCode:  sec + 's 后重新获取',
                })
              }
            },1000)
          }
        })
      }
    }

    render() {
      const { getFieldDecorator } = this.props.form;
      const { autoCompleteResult, visible, visibleCopy } = this.state;
      const disabledOrNot = this.state.checked ? 'primary' : 'default';
      const disabled = (this.state.checked) && (this.state.registerMark == '注册用户') ?  '' : 'disabled';
      const getCodeBtn = this.state.getCode !== '获取验证码' ? "disab getCodeBtn" : "getCodeBtn";

      return (
        <div className="registerBox"> 
          <div className="img_bg">
            <div className="logo_bg">
              <a href="https://www.sinochembaas.com/" target="_blank">
                <img src={require("../Login/img/logo.png")} alt="" className="login_logo" />
              </a>  
                <img src={require("../Login/img/bg.png")} alt="" className="login_bg" />
            </div>
          </div>
          <div className="form_r">  
    
            <Form className="registerForm" onSubmit={this.handleSubmit}>
              <div className="registerCt">     
                <h3 className="registerCtTop">欢迎注册成为中化BaaS平台用户</h3> 
                <FormItem>
                    {getFieldDecorator('username', {
                      rules: [{ required: true, message: '请输入3到20位字符的字母数字组合的用户名', pattern: /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{3,20}$/ }],
                    })(
                      <Input size="large" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="请设置用户名" maxLength={20} />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                      rules: [{
                        required: true, message: '请输入8到20个字符之间的字母、数字和符号组合密码', pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,20}$/
                      }, {
                        validator: this.validateToNextPassword,
                      }],
                    })(
                      <Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请设置密码" maxLength={20} />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('confirmpassword', {
                      rules: [{
                        required: true, message: '请再次设置你的密码',
                      }, {
                        validator: this.compareToFirstPassword,
                      }],
                    })(
                      <Input size="large" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="请再次设置你的密码" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: '请输入真实姓名' }],
                    })(
                      <Input size="large" prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} type="text" placeholder="请输入真实姓名" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('telPhone', {
                      rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[0-9]{10}$/ }],
                    })(
                      <Input size="large" prefix={<Icon type="phone" style={{ color: 'rgba(0,0,0,.25)' }} />} type="text" placeholder="预留手机号" maxLength={11} onChange={this.getPhone} />
                    )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('attr1', {
                    rules: [{ required: true, message: '请输入短信验证码，仅限数字', pattern: /^[0-9]+$/ }],
                  })(
                    <div className="getCodeBox">
                      <Input size="large" prefix={<Icon type="message" style={{ color: 'rgba(0,0,0,.25)' }} />} type="text" placeholder="请输入短信验证码" maxLength={8} />
                      <span className={getCodeBtn} onClick = {this.handleCode}>{this.state.getCode}</span>
                    </div>
                  )}
                </FormItem>
                <div className="userCopyRight">
                  <Checkbox
                        checked={this.state.checked}
                        disabled={this.state.disabled}
                        onChange={this.onChange}
                      >
                        
                      </Checkbox>
                      <span>我已同意<em className="modalCopy" onClick={this.modalCopy}>《中化BaaS平台用户使用协议》</em></span>
                  </div>
                <Button type="primary" size="large" htmlType="submit" type= {disabledOrNot} disabled={disabled} className="registerBtn">{this.state.registerMark}</Button>
                  <span className="loginBtn">已有中化BaaS平台账号？去<Link to="/"><em onClick={this.gotologin}>登录</em></Link></span>
              </div>
            </Form>
          </div>
          <Modal
            className="RegisterCopy"
            visible={visibleCopy}
            title="中化BaaS平台用户使用协议"
            onOk={this.handleOkCopy}
            onCancel={this.handleCancelCopy}
            footer={[
              <Button key="submit" type="primary" onClick={this.handleOkCopy}>确定并同意</Button>,
              <Button key="back" type="default" onClick={this.handleCancelCopy}>取消</Button>
              ]}
          >
            <div className="userCopy">
              <p>中化BaaS平台用户使用协议</p>
              <p>欢迎您选择中化BaaS平台作为您的区块链服务商。</p>
              <p>在您成功注册并使用中化BaaS平台之前，请仔细阅读中化BaaS平台用户使用协议（以下简称“本使用协议”），并确定完全理解并同意本使用协议中的所有内容。<b>如果您不同意本使用协议中的任何细节，请勿注册使用中化BaaS平台。</b></p>
              <p>本使用协议适用于网址为www.sinochembaas.com的中化BaaS平台以及由中化BaaS官方签署协议并提供官方链接的各第三方网站。中化BaaS平台会向您提供在网站中所公布承诺的各项区块链服务以及公布承诺的由第三方提供的各项服务。本网站包含的所有数据、文字、图片、商标及计算机编码、源代码（合称为“内容”）均为中化BaaS平台所有，未经允许，不得对本网站的内容进行任何形式的篡改、编写、复制、传输、使用或散布至任何其他计算机、服务器、网站或其他媒介。</p>

              <p>中化BaaS平台保留自行决定在任何时候变更、修改、增加或删除本使用协议部分或全部内容的权利。中化BaaS平台会在本使用协议有变更时告知您，但中化BaaS平台没有责任必须在每次变更时行使告知义务。您有责任定期查看本使用协议的变更。<b>若您在平台变更信息发布之后继续使用中化BaaS平台的相关服务，即表示您同意且接受该等变更。</b></p>
              <p>中化BaaS平台向您提供区块链相关服务，并配合您配置开发相关业务合作程序及应用。中化BaaS平台对您的交易内容没有监督管理的责任。</p>
              <p>您在使用中化BaaS平台服务时（包含但不限于上传资料、进行交易、审批管理、应用开发等），必须遵守国家相关法律法规和公共道德准则，维护计算机网络安全。不得从事危害国家安全、泄漏国家机密等违法犯罪活动；不得发布、查阅、复制和传播妨碍社会治安、破坏国家统一、破坏民族团结、宣扬色情暴力等违反宪法和法律的信息。</p>
              <p>若您接受并遵守本使用条款，中化BaaS平台将授予您登录并使用相关服务的权利，并保证您的用户信息安全。但对由非故意或不可抗拒的原因（含系统维护和升级）导致的一切后果，中化BaaS平台不承担赔偿以及其他任何连带的法律责任。</p>
              <p><b>若您在使用中化BaaS平台服务过程中有任何违反本使用协议的行为，中化BaaS平台有权随时单方面采取行动暂停或终止向您提供服务，并有权追究您相关责任。</b></p>
              <p>继续注册，意味着您已经完全理解并接受本协议。</p>
            </div>
          </Modal> 
        </div>
      )
    }
  }
  
  const registerForm = Form.create()(Register);
  export default registerForm;